<div id="{{config.name}}" class="dynamic-field form-list" [formGroup]="group" [ngClass]="fieldShow" *ngIf="!config['isHidden']"
    ix-auto ix-auto-type="list" ix-auto-identifier="{{config.placeholder}}">
    <ng-container *ngIf="listsFromArray?.controls">
        <div *ngFor="let liControl of listsFromArray.controls; let i = index" [fxLayout]="config.width == '100%' ? 'row wrap' : (default)"
                                ix-auto ix-auto-type="list-item" ix-auto-identifier="{{i}}" class="form-list-item {{config.listFields[0][0].type}}">
            <ng-container *ngFor="let field of config.listFields[i]; let ii = index" >
              <div *ngIf="!field.isHidden" fxFlex="{{config.deleteButtonOnFirst ? '100%' : 'calc(100% - 100px)'}}"
                [ngClass]="{'form-inline': field.class == 'inline', 'form-line': field.class !== 'inline', 'list-action-block-wrapper' : config.deleteButtonOnFirst}"
                fxFlex.gt-xs="calc({{field.width}} - 100px - 32px)">
                
                <div dynamicField [config]="field" [group]="listsFromArray.controls[i]"></div>

              </div>
            </ng-container>
            <div *ngIf="!config.hideButton" class="list-action" 
              [ngClass]="{'list-action-inline': !config.deleteButtonOnFirst, 'list-action-block' : config.deleteButtonOnFirst}"
              fxFlex="{{ config.deleteButtonOnFirst ? '100' : '100px'}}" 
              [style.padding-bottom]="config.width == '100%' ? '10px' : '0'">
            <ng-container *ngIf="config.deleteButtonOnFirst; else defaultButtons">
              <div>
                    <button *ngIf="i === listsFromArray.controls.length-1" mat-button color="primary" 
                        id="{{config.name+i}}" type="button" style="margin-right:5px"
                        (click)="add()" [disabled]="listsFromArray.controls[i].disabled"
                          ix-auto ix-auto-type="button" ix-auto-identifier="{{config.addBtnMessage | uppercase}}">
                        {{config.addBtnMessage | translate}}
                    </button>
                    <button mat-button color="default" class="listBtn" type="button"
                        (click)="delete(i)" [disabled]="listsFromArray.controls[i].disabled || listsFromArray.length === 1"
                            ix-auto ix-auto-type="button" ix-auto-identifier="DELETE">
                        {{"Delete" | translate}}
                    </button>
              </div>
            </ng-container>
            <ng-template #defaultButtons>
              <div>
                <button *ngIf="i === 0; else deleteButton" mat-button color="default" class="listBtn" type="button"
                (click)="add()" [disabled]="listsFromArray.controls[i].disabled"
                    ix-auto ix-auto-type="button" ix-auto-identifier="ADD">
                {{"Add" | translate}}
                </button>
                <ng-template #deleteButton>
                    <button mat-button color="default" class="listBtn" type="button" 
                    (click)="delete(i)" [disabled]="listsFromArray.controls[i].disabled"
                        ix-auto ix-auto-type="button" ix-auto-identifier="DELETE">
                    {{"Delete" | translate}}
                </button>
                </ng-template>
              </div>
            </ng-template>
            </div>
        </div>
    </ng-container>
    <form-errors [control]="group.controls[config.name]" [config]="config"></form-errors>
    <mat-error *ngIf="config['hasErrors']"><div [innerHTML]="config['errors']"></div></mat-error>
</div>
